<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.8, user-scalable=no">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>编码の聊天室</title>
    <style>
        .borad{
            border-radius:5px;
            background-color:white;
            box-shadow:0px 5px 5px rgba(0,0,0,0.15);
            overflow:hidden;
            width:60vh;
            height:fit-content;
            position:absolute;
            margin:auto;
            left:0px;
            right:0px;
            top:0px;
            bottom:0px;
        }
        .header{
            padding:10px;
            border-bottom:1px solid lightgrey;
        }
        .header>div[type="title"]{
            text-align:center;
            font-size:18pt;
        }
        body{
            background-color:#222222;
        }
        .chat-borad{
            padding:10px;
            height:65vh;
            overflow:auto;
            white-space: normal;
        }
        div::-webkit-scrollbar{
            height:4px;
            width:4px;
        }
        div::-webkit-scrollbar-thumb{
            background-color:#dcdcdc;
        }
        div::-webkit-scrollbar-thumb:hover{
            background-color:#cccccc;
        }
        .globalmsg{
            font-size:13px;
            color:grey;
            text-align:center;
            margin:3px;
        }
        button{
            background-color:#006eff;
            color:white;
            cursor:pointer;
            padding:4px;
            padding-left:12px;
            padding-right:12px;
            padding-bottom:6px;
            border:none;
            border-radius:3px;
        }
        input{
            height:100%;
            outline:0px solid transparent;
            border:1px solid transparent;
            width:70%;
            height:15px;
            padding:5px;
            border-radius:3px;
        }
        input:focus{
            border:1px solid #006eff
        }
        .msg-borad{
            padding:10px;
            background-color:#dedede;
        }
        .users-borad{
            float:left;
            width:19.7%;
            height:75.7vh;
            border-right:1px solid lightgrey;
        }
        .live{
            width:100%;
            background-color:lightgrey;
            text-align:center;
            padding-top:10px;
            padding-bottom:10px;
        }
        #users{
            padding:5px;
            overflow:auto;
            max-height:85%;
        }
        .user-name{
            padding:5px;
            padding-top:8px;
            padding-bottom:10px;
            text-align:center;
            border-bottom:1px solid lightgrey;
        }
        .user-msg-po{
            padding:7px;
            padding-left:12px;
            padding-right:10px;
            background-color:lightgrey;
            border-radius:6px;
            border-top-left-radius:1px;
            width:fit-content;
            max-width:90%;
        }
        .user-msg-name{
            font-size:13px;
            color:#a0a0a0;
            margin:2px;
        }
        .bg{
            position:fixed;
            z-index:99;
            background-color:rgba(0,0,0,0.3);
            top:0px;
            bottom:0px;
            width:100%;
            backdrop-filter:blur(3px);
        }
        .lianjie{
            color:white;
            text-shadow:1px 1px 5px rgba(0,0,0,0.4);
            position:fixed;
            left:0px;
            right:0px;
            top:0px;
            bottom:0px;
            margin:auto;
            height:fit-content;
            width:fit-content;
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="lianjie"><h4>服务器连接中...</h4></div>
    </div>
    <div class="borad">
        <div class="header">
            <div type="title">编码の聊天室</div>
        </div>
        <div class="users-borad">
            <div class="live">
                在线<br/>
                (<span id="live-number"></span>)
            </div>
            <div id="users"></div>
        </div>
        <div style="width:80%;float:right">
            <div class="chat-borad"></div>
            <div class="msg-borad">
                <center>
                    <input type="text" placeholder="请输入消息">
                    <button onclick="sendInput()">发送</button>
                </center>
            </div>
        </div>
    </div>
    <script>
        window.$Chat$Borad$Element = document.querySelector(".chat-borad")
        window.$Chat$Input$Element = document.querySelector("input");
        function addhtml(t, ...v){
            let e = document.createElement(t);
            for(let i of v){
                if(i==null)continue;
                e.setAttribute(i[0],i[1]);
            }
            return e;
        }
        function setUserNumber(n){
            document.querySelector("#live-number").innerText = n;
        }
        var user_name;
        while (!(user_name = prompt("请输入你box3的昵称：")));
        var ws = new WebSocket('wss://3fee5674.r2.cpolar.cn');
        const produces = {
            global:printGlobalMsg,
            user:printUserMsg,
            error:function(d){
                alert(d.msg);
                user_name = null;
                location.reload();
            },
            updateuser(d){
                if(d.length){
                    setUserNumber(d.length);
                }
                let html = "";
                for(let i of d.users){
                    if(i.length>3)i=i.slice(0,3)+"...";
                    html+='<div class="user-name">'+i+'</div>';
                }
                document.querySelector("#users").innerHTML = html;
            },
        }
        ws.onopen = function () {
            send({ type:"add_user",name:user_name});
            document.querySelector(".bg").remove();
        }
        ws.onmessage = function (e) {
            let data = JSON.parse(e.data);
            produces[data.type?data.type:""]?produces[data.type](data):null;
        }
        ws.onclose = function(){
            alert("服务器中断");
        }
        function send(d) {
            ws.send(JSON.stringify(d));
        }
        function printGlobalMsg(d) {
            if(d.msg){
                let h = addhtml("div",["class","globalmsg"]);
                h.innerText = d.msg;
                window.$Chat$Borad$Element.appendChild(h);
                window.$Chat$Borad$Element.scrollTop = window.$Chat$Borad$Element.scrollHeight;
            }
        }
        function printUserMsg(d) {
            if(d.name&&d.msg){
                let e = addhtml("div",["class","user-msg-po"],(user_name==d.name)?["style","background-color:#DCE7FF;"]:null),e1 = addhtml("div",["class","user-msg-name"],(user_name == d.name)?["style",""]:null);
                e1.innerText = d.name;
                e.innerText = d.msg;
                window.$Chat$Borad$Element.appendChild(e1);
                window.$Chat$Borad$Element.appendChild(e);
                window.$Chat$Borad$Element.scrollTop = window.$Chat$Borad$Element.scrollHeight;
            }
        }
        function sendInput(){
            send({type:"user",msg:$Chat$Input$Element.value});
            $Chat$Input$Element.value = "";
        }
        $Chat$Input$Element.onkeyup = function(e){
            if(e.key == "Enter"){
                sendInput();
            }
        }
    </script>
</body>

</html>
